<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script>
function confirmDelete(delUrl) {
  if (confirm("Are you sure you want to delete?")) {
    document.location = delUrl;
  }
}
</script>


<script type="text/javascript">
	function ShowEditPanel(id){
	   $('#updatePanel' + id).show(500);
	}
	function HideEditPanel(id){
	   $('#updatePanel' + id).slideToggle(800);
	   $('#feedbackPanel' + id).fadeOut(500);
	}
	function updateCategory(id){
		var title = document.getElementById("title" + id).value;
		var description = $('#description' + id).val();
		
		if (title == ""){
			$('#feedbackPanel' + id).fadeIn(500);
		}
		else{
			$.ajax({
	            url : '${pageContext.request.contextPath}/ajax/taskCategory/update',
	            type : "POST",
	            data: { id: id, title: title, description: description },
	            dataType : "html",
	            beforeSend : function() {
	            	$('#imgSpinnerContainer' + id).show();
	            	//$('#categories').slideToggle(300);
	            },
	            complete : function() {
	            	//$('#categoryTitle' + id).hide();
	            	//$('#categories').show(500);
	            	
	            },
	            success : function(data) {
	            	//$('#errorPanelTitle').fadeOut(500);
	            	//alert(data);
	            	$('#categories').html(data);
	            	
	            },
	            error : function() {
	               alert("Failure args: " + arguments);
	            }
         });
			$('#feedbackPanel' + id).fadeOut(500);
		}
	}
</script>

<c:if test="${categories != null }">
	<c:forEach items="${categories}" var="category" varStatus="i">
		<%-- <form class="createCategory" style="padding:0px 0px 0px 10px;" id="form${category.id }" method="post" action=""> --%>
		<table style="border: 1px; width: 470px;">
			<%-- <div id="category${category.id}" style="margin-bottom: 5px;"> --%>
			<tbody>
				<tr>
					<td style="width: 360px;"><span class="category"
						id="categoryTitle${category.id}">${category.name}</span></td>
					<td style="width: 30px;"><a href="#"
						onclick="ShowEditPanel(${category.id});" id="edit">Edit</a></td>
					<td style="width: 80px;"><a href="javascript:confirmDelete('${pageContext.request.contextPath}/taskCategory/${category.id}/remove')" id="remove"
						onclick="">Remove</a> <span
						id="spinnerContainer">&nbsp;<img style="display: none;"
							id="imgSpinnerContainer${category.id}"
							src="${pageContext.request.contextPath}/images/loading.gif"></span>
					</td>

					<!-- <div style="width: 0px; height: 0px; position: absolute; left: -100px; top: -100px; overflow: hidden">
						<input name="form_hf_0" id="form_hf_0" type="hidden">
					</div> -->
				<tr>
					<td>
						<ul id="feedbackPanel${category.id}" class="feedbackPanel"
							style="display: none;">
							<li class="feedbackPanelINFO">
							<span class="feedbackPanelINFO">Field 'Title' is a required	field.</span></li>
						</ul>

						<div id="updatePanel${category.id}"
							style="vertical-align: middle; display: none; border: medium;">

							<input style="width: 200px;" value="${category.name}"
								name="title" id="title${category.id}" type="text">
							<h5 style="color: black;">Description</h5>
							<br>
							<textarea style="width: 200px; height: 50px;"
								class="Text semiFull" name="description${category.id}"
								id="description${category.id}">${category.description }</textarea>
							
							<span> 
								<a class="gcSubmit small" id="updateLink" href="#"
									onclick="updateCategory(${category.id});"> Update <span
										class="left"></span> <span class="right"></span>
								</a> 
								<span id="spinnerContainer">&nbsp;<img
										style="display: none;" id="imgSpinnerContainer"
										src="${pageContext.request.contextPath}/images/loading.gif"></span>
							</span> or <a onclick="HideEditPanel(${category.id});" href="#"
								id="cancel">cancel</a>
						</div>
					</td>
				</tr>
				<!-- </div> -->

			</tbody>
		</table>
		<!-- </form> -->
	</c:forEach>
</c:if>